<a class="sidenav-anchor"
   [ngClass]="item.customClass"
   *ngIf="!item.hasSubItems()"
   mat-list-item mat-ripple
   [routerLink]="[item.route]"
   routerLinkActive="active"
   [routerLinkActiveOptions]="{exact: true}">

  <mat-icon>{{ item.icon }}</mat-icon>
  <span class="sidenav-item-name fade-in-on-icon-sidenav">{{ item.name }}</span>
  <span fxFlex></span>
  <span class="badge fade-in-on-icon-sidenav" *ngIf="item.badge" [style.background-color]="item.badgeColor">{{ item.badge }}</span>
</a>

<a class="sidenav-anchor"
   [ngClass]="item.customClass"
   *ngIf="item.hasSubItems()"
   mat-list-item mat-ripple
   (click)="toggleDropdown()">

  <mat-icon>{{ item.icon }}</mat-icon>
  <span class="sidenav-item-name fade-in-on-icon-sidenav">{{ item.name }}</span>
  <span fxFlex></span>
  <span class="badge fade-in-on-icon-sidenav" *ngIf="item.badge" [style.background-color]="item.badgeColor"
        style="margin-right: 10px;">{{ item.badge }}</span>
  <mat-icon *ngIf="item.hasSubItems()" class="sidenav-item-dropdown-indicator rotate fade-in-on-icon-sidenav">
    expand_more
  </mat-icon>

</a>

<mat-nav-list class="sidenav-list sidenav-list-nested"
             fxLayout="column" [style.height]="getSubItemsHeight()">
  <sidenav-item *ngFor="let subItem of item.subItems" [item]="subItem"></sidenav-item>
</mat-nav-list>
